<!-- 普通搜索栏 搜索栏 -->
<!-- 参数
  searchcfg ： 配置选项的配置文件 格式如下
  searchcfg: [{
    key: 'cdfsSystemName', //真实的关键字
    type: 'input',   //组件类型
    label: '数据来源系统', //显示的名称
    placeholder: '数据来源系统',
	 labelspan: 2,  //标签的宽度
	 valuespan: 4, //显示区域的宽度
  },
  //下拉框
  {
    key: 'cdfsSystemName2',//真实的关键字
    type: 'select',  //组件类型
    label: '数据文件格式', //显示的名称
    placeholder: '数据文件格式',
    labelspan: 2,
    valuespan: 4,
	value_key:"KEY_",//选项数组中的key字段的名字 默认是KEY_ 可以不写
	lable_key:"LABLE_",  //选项数组中 显示名称的字段名 默认是LABLE_可以不写
    valuemap:[{KEY_:'aaa',LABLE_:'选项A'},{KEY_:'bbb',LABLE_:'选项B'}]
  },
  //日期选择
  {
    key: 'cdfsSystemName2',//真实的关键字
    type: 'date_picker',  //组件类型
	date_type:"daterange", //组件数据类型
    label: '数据文件格式', //显示的名称
    placeholder: '数据文件格式',
    labelspan: 2,
    valuespan: 4,
	value_key:"KEY_",//选项数组中的key字段的名字 默认是KEY_ 可以不写
	lable_key:"LABLE_",  //选项数组中 显示名称的字段名 默认是LABLE_可以不写
    valuemap:[{KEY_:'aaa',LABLE_:'选项A'},{KEY_:'bbb',LABLE_:'选项B'}]
  }],

  buttons: [{
    name: "新增",
    type: 'primary',
    event: 'create',
    eventData: {}
  }],
-->
<!-- 事件
  select data：{key：value}标准搜索json
 -->
<template>
	<div v-if="searchcfg" class="searchDiv">
		<el-row :gutter="6" @keyup.enter.native="getResult">
			<template v-for="item in searchcfg">
				<el-col :span="item.labelspan?item.labelspan:2">
					<div class="lable">
						{{item.label}}
					</div>
				</el-col>
				<el-col :span="item.valuespan?item.valuespan:4" class="value">
					<!-- 普通的输入框 -->
					<template v-if="item.type == 'input'">
						<el-input v-model="searchdata[item.key]" size="mini" :label="item.name" class="value_input"
							:placeholder="item.placeholder"></el-input>
					</template>
					<!-- 选择框 -->
					<template v-else-if="item.type == 'select'">
						<el-select v-model="searchdata[item.key]" size="mini" clearable class="value_select">
							<el-option v-for="it in item.valuemap" :key="it.KEY_" :value="it.KEY_" :label="it.VALUE_">
							</el-option>
						</el-select>
					</template>
					<template v-else-if="item.type == 'date-picker'">
						<el-date-picker class="value_date_picker" v-model="searchdata[item.key]" :type="item.date_type"
							align="right" unlink-panels range-separator="-" start-placeholder="开始日期"
							end-placeholder="结束日期">
						</el-date-picker>
					</template>
				</el-col>
			</template>
			<!-- 处理统一的按钮 以及自定义按钮 -->
			<el-col :span="getButtonSpan()" class="value">
				<el-button v-blur type="primary" plain size="mini" @click="select($event)" class=" button_class query">查询
				</el-button>
				<el-button v-blur type="info" plain size="mini" @click="reset($event)" class=" button_class reset">重置</el-button>
				<template v-for="item in buttons">
					<el-button v-blur class="button_class" :class="item.type?item.type:'added'" size="mini"
						:type="item.type?item.type:'success'" @click="throwevent($event,item)">
						{{item.name}}
					</el-button>
				</template>
			</el-col>
		</el-row>
	</div>

</template>

<script>
	import "@/assets/plugsclass.css"
	export default {
		name: "mainview",
		props: {
			searchcfg: Array,
			buttons: Array,
		},
		components: {},
		data() {
			return {
				selectType: false,
				resourceTypeToName: [],
				searchdata: null,
			};
		},
		created() {
			let data = {}
			for (var i = 0; i < this.searchcfg.length; i++) {
				let it = this.searchcfg[i]
				data[it.key] = ''
			}
			this.searchdata = data;
		},
		methods: {
			// 点击搜索按钮
			select(e) {
				 
				// console.log(this.searchdata)
				let realdata = {}
				for (let key in this.searchdata) {
					if (this.searchdata[key] == null || this.searchdata[key] == "") {
						continue;
					}
					realdata[key] = this.searchdata[key];
				}

				this.$emit('select', realdata)
			},
			// 点击重置按钮
			reset(e) {
				 
				for (let key in this.searchdata) {
					this.searchdata[key] = ''
				}
				this.$emit('select', {})
			},
			throwevent(e, item) {
				 
				//自定按钮点击之后向父级发送事件
				// console.log(item)
				this.$emit(item.event, item.eventData)
			},
			getButtonSpan() {
				let count = 4;
				if (this.buttons) {
					count += this.buttons.length * 2
				}
				return count;
			}
		}
	};
</script>

<style scoped="" lang='scss'>
	.searchDiv {
		position: relative;
		background: #F4F8FF;
		border: 1px solid #B9DAF2;
		border-radius: 8px;
		padding: 15px 22px 15px 22px;
	}

	.lable {
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		text-align: right;
	}

	.value {
		height: 40px;
	}

	.value_input {
		margin-top: 20px;
		transform: translateY(-50%);
	}

	.value_select {
		margin-top: 20px;
		transform: translateY(-50%);
	}

	.value_date_picker {
		margin-top: 20px;
		transform: translateY(-50%);
	}
	.button_class{
		border: 0;
		padding: 0 10px;
	}
	.query,
	.reset,
	.export,
	.del,
	.added {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		vertical-align: middle;
		line-height: 2px;
		min-width: 70px;
		height: 28px;
		background: linear-gradient(90deg, #3D80FF, #3DAFFF);
		border-radius: 5px;
		border: 0;
		padding: 0 10px;
	}
	.query:hover{
		color: #ADAFB1;
	}
	.del{
		background: linear-gradient(90deg, #FF5A5A, #FF7272);
	}
	.export{
		background: linear-gradient(90deg, #FFA800, #FFCB5C);
	}
	.reset {
		background: linear-gradient(90deg, #C7CBCC, #ADAFB1);
	}
	.added{
		background: linear-gradient(90deg, #0BC6AA, #13E8CC);
	}
</style>
